<!-- 发送记录 -->
<template>
  <div class="noticeSendRecord sys-content">
    <page-mod>
      <el-card>
        <div class="query-box">
          <el-form :model="query" inline>
            <el-form-item label="通知名称:">
              <el-input v-model="query.name" placeholder="请输入通知名称" clearable/>
            </el-form-item>
            <el-form-item label="接收人:">
              <el-input v-model="query.code" placeholder="请输入接收人" clearable/>
            </el-form-item>
          </el-form>
          <div class="btns">
            <el-button icon="Search" color="#16b777" @click="load(1)">查询</el-button>
            <el-button icon="Refresh" color="#FF5722" @click="resetSearch">重置</el-button>
          </div>
        </div>
      </el-card>
    </page-mod>
    <page-mod title="通知发送记录数据" icon="Histogram" :showBtn="false" :padBottom="false">
      <el-card v-loading="loading" element-loading-text="拼命加载中">
        <el-table :data="dataList" max-height="493" border>
          <el-table-column label="序号" type="index" align="center" width="60"/>
          <el-table-column label="通知名称" prop="name" align="center"></el-table-column>
          <el-table-column label="发送内容" prop="code" align="center"></el-table-column>
          <el-table-column label="发送方式" prop="status" align="center">
            <template #default="{row}">
              <el-tag :type="row.status ? 'success' : 'danger'">{{ row.status ? '启用' : '禁用' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发送时间" prop="createdTime" align="center">
            <template #default="{row}">
              <span>{{ $date(row.createdTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="180">
            <template #default="{row}">
              <el-button type="primary" icon="View" link @click="toView(row.id)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination 
          class="paging"
          v-show="query.total"
          small
          layout="total, sizes, prev, pager, next, jumper" 
          :current-page="query.current" 
          :page-size="query.size"
          :total="query.total"
          @current-change="load"
          @size-change="sizeChange">
        </el-pagination>
      </el-card>
    </page-mod>

    <!-- 新增、编辑弹窗 -->
    <el-drawer 
      v-model="show" 
      :with-header="false" 
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true" 
      size="89.6%">
      <record :noticeId="currentNoticeId" @close="show = false"></record>
    </el-drawer>
  </div>
</template>

<script setup name="noticeSendRecord">
  import record from './record.vue'
  import { ref, getCurrentInstance, onActivated } from 'vue'

  // 获取注册的全局实列
  const currentThis = getCurrentInstance().appContext.config.globalProperties

  let loading = ref(false)
  let show = ref(false)
  let query = ref({
    name: '',
    code: '',
    current: 1,
    size: 20,
    total: 1
  })
  let dataList = ref([
    {id: 1, name: '士大夫但是', code: 'sdfdsfds', desc: '士大夫但是发放',  status: 1, createdTime: '2023-05-12 13:25:56'}
  ])
  let currentNoticeId = ref('')

  function load(page) {
    // currentData.loading = true
    // currentData.query.current = page
    // getRolePagesApi(currentData.query).then(res => {
    //   currentData.loading = false
    //   if(res.code === '200') {
    //     currentData.dataList = res.data.pages
    //     currentData.query.total = res.data.total
    //   } else {
    //     currentThis.$message.error(res.message)
    //   }
    // })
  }

  function toView(id) {
    currentNoticeId.value = id
    show.value = true
  }

  // 重置查询
  function resetSearch() {
    query.value.name = ''
    query.value.code = ''
    load(1)
  }

  // 分页每页显示条数改变执行
  function sizeChange(size) {
    query.value.size = size
    load(1)
  }

  onActivated(() => {
    load(query.value.current)
  })
</script>

<style lang="less" scoped>
.noticeSendRecord{
  :deep(.el-drawer){
    .el-drawer__body{
      padding: 0 20px !important;
    }
  }
}
</style>